<template>
    <div class="homepage_container">
        <!--走马灯 -->
        <div class="first" style="width: 1100px">
            <el-carousel height="400px" style="margin-top: -30px; text-align: center; margin-left: -350px; ">
                <el-carousel-item v-for="item in realdata" :key="item.index" style="text-align: center; line-height: 120px">
                    <div class="pic_item">
                        <img :src="item.imgsrc" width="100%">
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 详情弹窗 -->
        <el-dialog v-model="dataSon" :title=dataSon.title :visible.sync="dialogFormVisible" style="text-align: center;">
            <div style="margin-top: -35px;">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="正文" name="consult_content">
                        <div style="text-align: left">
                            <span>{{ dataSon.content }}</span>
                        </div>
                        <div style="text-align: left; margin-top: 20px;">
                            <p>著作人：{{ dataSon.updatePerson }}</p>
                            <p>发布时间：{{ dataSon.uploadTime }}</p>
                            <p>修改时间：{{ dataSon.updateTime }}</p>
                            <p>新闻链接：<el-link :href="contentUrl" target="_blank" type="primary" >{{ dataSon.title
                            }}</el-link></p>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane v-if="sta" label="阅读情况" name="read_status">
                        <div style="text-align: right">
                            <el-radio-group v-model="radio">
                                <el-radio :label="1" @click.native.prevent="selectByRead(radio)"><span
                                        style="color: #67C23A;">已阅读:</span>{{ read }}</el-radio>
                                <el-radio :label="0" @click.native.prevent="selectByUnRead(radio)"><span
                                        style="color: #F56C6C;">未阅读:</span>{{ unread }}</el-radio>
                            </el-radio-group>
                        </div>
                        <div>
                            <el-table :data="tableData.slice((pagenum1 - 1) * pagesize1, pagenum1 * pagesize1)" stripe
                                style="width: 100%">
                                <el-table-column label="序号" type="index">
                                </el-table-column>
                                <el-table-column prop="nickName" label="姓名" width="180">
                                </el-table-column>
                                <el-table-column prop="status" label="阅读情况">
                                    <template slot-scope="scope">
                                        <div
                                            :style="{ color: scope.row.status == 1 || scope.row.status == '已阅读' ? '#67C23A' : '#F56C6C' }">
                                            {{ scope.row.status == 1 || scope.row.status == '已阅读' ? "已阅读" : "未阅读" }}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                            :current-page="pagenum1" :page-sizes="[1, 2, 5, 10]" :page-size="pagesize1"
                            layout="total, sizes, prev, pager, next, jumper" :total="total1" style="margin-top: 5px;">
                        </el-pagination>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <div slot="footer" class="dialog-footer" style="text-align: left; margin-top: -35px;">
                <div style="text-align: center; margin-top: 5px;">
                    <el-button @click="dialogFormVisible = false">关闭</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 网页正文信息 -->
        <div class="major" style="margin-top: 20px; height: 1000px;  width: 1100px;">
            <div class="no1" v-for="item in realdata" style="margin-bottom: 20px;width: 1000px; margin-left: -350px;">
                <!-- 资讯图片 -->
                <div>
                    <img :src="item.imgsrc" style="height: 260px; width: 500px">
                </div>
                <!-- 资讯内容 -->
                <div style="display: block; margin-left: 30px; width: 400px; height: 240px; word-wrap: break-word">
                    <!-- 标题 -->
                    <el-link :underline="false" style="width: 500px; font-size: large; margin-left: 230px;" type="primary"
                        @click="getConsult(item)">{{ item.title }}</el-link>
                    <!-- 内容 -->
                    <div style="width: 900px; text-align: left;">
                        <span style="font-size: large;">{{ item.content | ellipsis }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { GetConsultInfoListAPI } from '@/components/utils/api/consult_api.js'
import { GetBinDingAPI } from '@/components/utils/api/sysfile_api.js'
import { PostReadAPI, GetReadAPI } from '@/components/utils/api/read_api.js'
export default {
    data() {
        return {
            tableData: [{}],
            read: '',
            unread: '',
            radio: '',
            activeName: 'consult_content',
            readList: [],
            unReadList: [],
            total1: 1,
            pagesize1: 10,
            pagenum1: 1,
            data1: [],
            realdata: [],
            data: [],
            data2: [],
            dataSon: [],
            contentUrl:'',
            title: '',
            dialogFormVisible: false,
            annexId: " ",
            content: " ",
            id: "  ",
            title: "  ",
            updatePerson: "  ",
            updatePersonId: "  ",
            updateTimes: '',
            uploadPerson: "  ",
            uploadPersonId: "  ",
            uploadTime: '',
            noticeId: ''
        }
    },
    created() {
        this.getConsultInfoList()
        this.getLogin()
    },
    methods: {

        selectByRead(val) {
            if (this.radio == 1) {
                this.radio = 2
                this.getReadStatus()
            }
            else {
                this.radio = 1
                this.tableData = this.readList
                this.total1 = this.tableData.length
            }
        },

        selectByUnRead(val) {
            if (this.radio == 0) {
                this.radio = 3
                this.getReadStatus()
            }
            else {
                this.radio = 0
                this.tableData = this.unReadList
                this.total1 = this.unReadList.length
            }
        },
        getLogin() {
            if (sessionStorage.getItem('token')) {
                this.sta = true
            }
            else if (sessionStorage.getItem('token') != true) {
                this.sta = false
            }
        },


        //获取列表信息
        async getConsultInfoList() {
            await GetConsultInfoListAPI({}).then(res => {
                this.data = res.data.data
                this.data.forEach((element, index) => {
                    if (element.annex.length == 0) {
                        this.data1.push(null)
                    }
                    else {
                        element.annex.forEach(item => {
                            this.data1.push(item.id)
                        });
                    }
                });
            })
            for (let i = 0; i < this.data1.length; i++) {
                await GetBinDingAPI(this.data1[i]).then(res => {
                    this.data2.push(res.data.data)
                })
            }
            this.data.forEach((element, i) => {
                this.realdata.push({
                    contentUrl: element.contentUrl,
                    imgsrc: this.data2[i],
                    content: element.content,
                    id: element.id,
                    title: element.title,
                    updatePerson: element.updatePerson,
                    updatePersonId: element.updatePersonId,
                    updateTime: element.updateTime,
                    uploadPerson: element.uploadPerson,
                    uploadPersonId: element.uploadPersonId,
                    uploadTime: element.uploadTime
                })
            });
        },


        //监听pagesize改变的事件
        handleSizeChange1(newSize) {
            this.pagesize1 = newSize
        },

        //监听页码值改变的事件
        handleCurrentChange1(newPage) {
            this.pagenum1 = newPage
        },

        //获取弹窗信息,同时发送阅读情况
        getConsult(information) {
            console.log("file: EpidemicConsultation.vue:222  information", information)
            this.noticeId = information.id
            this.dialogFormVisible = true
            this.dataSon = information
            this.contentUrl = information.contentUrl
            if (sessionStorage.getItem('token') != null) {
                var params = {
                    refId: information.id,
                    operation: 1,
                    refType: "cosult",
                    status: 0
                }
                PostReadAPI(params).then(res => {
                    // console.log("file: EpidemicConsultation.vue:225  res", res)

                })
                this.getReadStatus()
            }
        },

        // 获取阅读情况
        getReadStatus() {
            GetReadAPI({
                refId: this.noticeId
            }).then(res => {
                // console.log(this.noticeId)
                console.log(res)
                this.readList = res.data.data.readList
                this.unReadList = res.data.data.unreadList
                this.tableData = res.data.data.list
                this.read = res.data.data.read
                this.unread = res.data.data.unread
                this.total1 = this.tableData.length
                this.tableData.forEach(element => {
                    if (element.status == 0) {
                        element.status = "未阅读"
                    }
                    else if (element.status != 0) {
                        element.status = "已阅读"
                    }
                });
            })
        },
    },
    //段落长度过滤
    filters: {
        ellipsis(value) {
            if (!value) return ''
            if (value.length > 100) {
                return value.slice(0, 480) + '...'
            }
            return value
        }
    }
}
</script>
<style>
.homepage_container {
    display: block;
    width: 100%;
    height: 100%;
}

.major {
    height: 100%;
    width: 400px;
    margin-top: 50px;
    text-align: center;
    padding-left: 25%;
}

.no1 {
    display: flex;
}

.no2 {
    display: flex;
    margin-top: 30px;
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}

.pic_item {
    position: relative;
    height: 100%;
}

.pic_item:hover {
    cursor: pointer;
}

.pic_item img {
    width: 100%;
    height: 100%;
}

.pic_item span {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 30%;
    font-size: x-large;
}
</style>